import { ref, onMounted, onUnmounted } from 'vue'
import { useMotion } from '@vueuse/motion'
import { gsap } from 'gsap'

export const useAnimations = () => {
  // 常用动画预设
  const fadeInUp = {
    initial: {
      opacity: 0,
      y: 30,
    },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 500,
        ease: 'easeOut',
      },
    },
  }

  const fadeInLeft = {
    initial: {
      opacity: 0,
      x: -30,
    },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        duration: 500,
        ease: 'easeOut',
      },
    },
  }

  const fadeInRight = {
    initial: {
      opacity: 0,
      x: 30,
    },
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        duration: 500,
        ease: 'easeOut',
      },
    },
  }

  const scaleIn = {
    initial: {
      opacity: 0,
      scale: 0.8,
    },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 400,
        ease: 'easeOut',
      },
    },
  }

  const bounceIn = {
    initial: {
      opacity: 0,
      scale: 0.3,
    },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 600,
        ease: 'backOut',
      },
    },
  }

  const slideInFromBottom = {
    initial: {
      opacity: 0,
      y: 100,
    },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 600,
        ease: 'easeOut',
      },
    },
  }

  // 悬浮动画
  const hoverFloat = {
    hover: {
      y: -10,
      transition: {
        duration: 300,
        ease: 'easeOut',
      },
    },
  }

  // 点击动画
  const clickScale = {
    tap: {
      scale: 0.95,
      transition: {
        duration: 150,
        ease: 'easeOut',
      },
    },
  }

  // 延迟动画函数
  const createStaggeredAnimation = (delay: number = 100) => ({
    initial: {
      opacity: 0,
      y: 20,
    },
    visible: (index: number) => ({
      opacity: 1,
      y: 0,
      transition: {
        duration: 500,
        delay: index * delay,
        ease: 'easeOut',
      },
    }),
  })

  // 页面切换动画
  const pageTransition = {
    enter: {
      initial: {
        opacity: 0,
        x: 30,
      },
      visible: {
        opacity: 1,
        x: 0,
        transition: {
          duration: 300,
          ease: 'easeOut',
        },
      },
    },
    leave: {
      opacity: 0,
      x: -30,
      transition: {
        duration: 300,
        ease: 'easeIn',
      },
    },
  }

  // GSAP动画工具
  const createTimeline = () => gsap.timeline()

  const animateElement = (element: HTMLElement | string, animation: any) => {
    return gsap.to(element, animation)
  }

  const animateFrom = (element: HTMLElement | string, animation: any) => {
    return gsap.from(element, animation)
  }

  const animateSet = (element: HTMLElement | string, animation: any) => {
    return gsap.set(element, animation)
  }

  // 滚动触发动画
  const useScrollAnimation = (targetRef: any, animation: any = fadeInUp) => {
    const { apply } = useMotion(targetRef, animation)
    
    onMounted(() => {
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              apply('visible')
            }
          })
        },
        { threshold: 0.1 }
      )

      if (targetRef.value) {
        observer.observe(targetRef.value)
      }

      onUnmounted(() => {
        observer.disconnect()
      })
    })

    return { apply }
  }

  // 鼠标跟随动画
  const useMouseFollow = (elementRef: any, intensity: number = 0.1) => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!elementRef.value) return

      const rect = elementRef.value.getBoundingClientRect()
      const x = e.clientX - rect.left - rect.width / 2
      const y = e.clientY - rect.top - rect.height / 2

      gsap.to(elementRef.value, {
        x: x * intensity,
        y: y * intensity,
        duration: 0.3,
        ease: 'power2.out',
      })
    }

    const handleMouseLeave = () => {
      if (!elementRef.value) return

      gsap.to(elementRef.value, {
        x: 0,
        y: 0,
        duration: 0.5,
        ease: 'power2.out',
      })
    }

    onMounted(() => {
      if (elementRef.value) {
        elementRef.value.addEventListener('mousemove', handleMouseMove)
        elementRef.value.addEventListener('mouseleave', handleMouseLeave)
      }
    })

    onUnmounted(() => {
      if (elementRef.value) {
        elementRef.value.removeEventListener('mousemove', handleMouseMove)
        elementRef.value.removeEventListener('mouseleave', handleMouseLeave)
      }
    })
  }

  // 视差滚动效果
  const useParallax = (elementRef: any, speed: number = 0.5) => {
    const handleScroll = () => {
      if (!elementRef.value) return

      const scrolled = window.pageYOffset
      const rate = scrolled * -speed

      gsap.set(elementRef.value, {
        y: rate,
      })
    }

    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })
  }

  return {
    // 预设动画
    fadeInUp,
    fadeInLeft,
    fadeInRight,
    scaleIn,
    bounceIn,
    slideInFromBottom,
    hoverFloat,
    clickScale,
    createStaggeredAnimation,
    pageTransition,
    
    // GSAP工具
    createTimeline,
    animateElement,
    animateFrom,
    animateSet,
    
    // 高级动画hooks
    useScrollAnimation,
    useMouseFollow,
    useParallax,
  }
}
